<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
 <!--   <script src="asscerts/dist/js/bootstrapValidator.js"></script>
    <script src="asscerts/dist/js/language/zh_CN.js"></script>-->
</head>
<style>
    .navbar-inverse{
        height: 35px;
        font-size: 6px;
    }
    #a2{
        padding-top: 7px;
        margin-top: 0px;
        padding-right:0px;
        color: #eb9e9b
    }
    #a2:hover{
        color: #eb565f;
    }
    #div1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 910px;
        margin-left: 192px;
        margin-top: 40px;
    }
    #div2{
        overflow: hidden;
        /*border: red solid 1px;*/
        float: left;
        height: 80px;
        width: 150px
    }
    #div3{
        /*border: red solid 1px;*/
        float: left;
        margin-left: 20px;
        font-size: 18px;
        height: 80px;
        width: 350px;
        font-weight:500;
        color: #4a4a4a;
        padding-top: 25px;
        font-family:微软雅黑;
    }
    .span1 {
        /* 鼠标移入变小手 */
        cursor: pointer;

    }
    .delete{
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    #deleteAll{
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    #span_shy:hover{
        /* 鼠标移入变小手 */
        cursor: pointer;
        color: #1E9FFF;
    }
    .span1:hover{
        font-weight: bold;
    }
    .form-group{
        /*border: red solid 1px;*/
        height: 80px;
        width: 300px;
        padding-top: 22px;
        float: right;
        color: #FFFFFF;

    }
    #button_id{
        float: right;
        width: 70px;
        height: 34px;
        background-color: #ff6e39;
        border: 0px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px #888888;
    }
    #div4{
        border: #f8f6fd solid 1px;
        width: 100%;
        height: 100%;
        background-color: rgba(248, 246, 253, 0.77);
    }
    #div5{
        margin-left: 192px;

        width: 910px;
        background-color: #FFFFFF;
    }
    #div6{
        margin-left: 192px;
        margin-top: 46px;
        margin-bottom: 4px;
    }
    #button_id1{
        margin-left:15px;
        margin-top:20px;
        width: 64px;
        height: 40px;
        border-radius: 20px;
        background-color: #ff6e39;
        border: 0px;
        color: #FFFFFF;
        box-shadow: 0px 0px 5px #888888;
    }

</style>
<script>
    $(function () {
        $.ajax({
            url:"/taobei_web/cart/getProductList",
            type:"get",
            dataType:"json",
            success:function (respBean) {
                if (respBean.status == 200) {
                    $.ajax({
                        url:"/taobei_web/cart/getCartSum",
                        type:"get",
                        dataType:"json",
                        success:function (respBean) {
                            if (respBean.status == 200) {
                                $("#nums1").html(respBean.data.nums)
                                $("#a2").html("欢迎你："+respBean.data.userName)
                            }
                        }
                    })
                    let text;
                    for (let i = 0; i < respBean.data.length; i++) {
                        text +="<tr>\n" +
                            "                <td style=\"display: none\">"+respBean.data[i].id+"</td>\n" +
                            "                <td style=\"width: 300px\">\n" +
                            "                    <div style=\"float: left;margin-right: 10px;margin-top: 40px\">\n" +
                            "                        <input type=\"checkbox\" class=\"single\" >\n" +
                            "                    </div>\n" +
                            "                    <div style=\"width: 100px;height: 100px;overflow: hidden;float: left\">\n" +
                            "                        <img src=\""+respBean.data[i].url+"\" style=\"width: 100%\">\n" +
                            "                    </div>\n" +
                            "                    <div style=\"width: 150px;float: left;margin-top: 10px;margin-left: 5px\">\n" +
                            "                        <span>"+respBean.data[i].name+"</span><br>\n" +
                            "                        <div><p style=\"font-size: 10px;color: #88868d;margin: 0px\">"+respBean.data[i].context+"</p></div>\n" +
                            "                        <span style=\"font-size: 12px\"><a>店铺名称：<span>"+respBean.data[i].storeName+"</span></a></span>\n" +
                            "                    </div>\n" +
                            "                </td>\n" +
                            "                <td style=\"width: 150px;font-size: 12px;color: #88868d;\">\n" +
                            "                    <div style=\"margin-top: 15px;margin-left: 10px\">\n" +
                            "                        <div style=\"margin-bottom: 8px\">商品类型：<span>"+respBean.data[i].ptName+"</span></div>\n" +
                            "                        <div style=\"margin-bottom: 8px\">存货：<span>"+respBean.data[i].repertory+"</span></div>\n" +
                            "                        <span>发货时间: <span>付款一天之内</span></span><br>\n" +
                            "                    </div>\n" +
                            "                </td>\n" +
                            "                <td style=\"width: 120px\">\n" +
                            "                    <div style=\"text-align: center;font-size: 16px;margin-top: 14px\">\n" +
                            "                        <span>￥</span><span>"+respBean.data[i].discountPrice+"</span>\n" +
                            "                    </div>\n" +
                            "                </td>\n" +
                            "                <td style=\"width: 120px\">\n" +
                            "                    <div class=\"row\" style=\"width: 100px;margin-top: 14px\">\n" +
                            "                        <div class = \"col-lg-6\">\n" +
                            "                            <div  class = \"input-group\">\n" +
                            "                                <span class = \"input-group-btn\" >\n" +
                            "                                    <button  class = \"btn btn-default js\"  type = \"button\">-</button>\n" +
                            "                                </span>\n" +
                            "                                <input name=\"keleyicom\" type = \"text\"  class = \"form-control\"  placeholder = \""+respBean.data[i].number+"\" style=\"width: 40px\">\n" +
                            "                                <span  class = \"input-group-btn\" >\n" +
                            "                                    <button class = \"btn btn-default zj\" type = \"button\">+</button>\n" +
                            "                                </span>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </td>\n" +
                            "                <td>\n" +
                            "                    <div style=\"color: red;font-weight: bold;text-align: center;margin-top: 10px\">\n" +
                            "                        <span>￥</span><span name=\"money\">"+respBean.data[i].money+"</span>\n" +
                            "                    </div>\n" +
                            "                </td>\n" +
                            "                <td style=\"text-align: center;font-size: 10px\">\n" +
                            "                    <div class=\"delete\"  style=\"margin-top: 15px\">\n" +
                            "                        <a>删除</a>\n" +
                            "                    </div>\n" +
                            "                    <div>\n" +
                            "                        <a>加入收藏夹</a>\n" +
                            "                    </div>\n" +
                            "                </td>\n" +
                            "            </tr>"
                    }
                    text +="<tr>\n" +
                        "      <td style=\"height: 60px\"></td>\n" +
                        "  </tr>"
                    $("#tbody").html(text);
                }
            }
        })
        $("#all").click(function () {
            $(".single").prop("checked",this.checked)
            $("#qb").prop("checked",this.checked)
            if (this.checked == false) {
                $("#moneyAll").html("0.00");
                $("#nums").html(0);
            }else {
                f()
            }
        })
        $("#qb").click(function () {
            $(".single").prop("checked",this.checked)
            $("#all").prop("checked",this.checked)

            if (this.checked == false) {
                $("#moneyAll").html("0.00");
                $("#nums").html(0);
            }else {
                f()
            }
        })
        $("#tbody").on("click",".single",function () {
            var $subs = $(".single");
            $("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
            $("#qb").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
            let num = true;
             $(".single").each(function () {
                 if (this.checked) {
                     num = false
                     f()
                 }
             })
            if(num){
                $("#moneyAll").html("0.00");
                $("#nums").html(0);
            }
        })
        /*增加*/
        $("#tbody").on("click",".zj",function () {
            let id = $(this).parents("tr").children("td").eq(0).html();
            let find = $(this).parents("tr").find("input:eq(1)");
            let span = $(this).parents("tr").find( "span[name='money']");
            $.ajax({
                url:"/taobei_web/cart/addProduct",
                data:{
                    CPId:id
                },
                type:"post",
                dataType:'json',
                success:function (respBean) {
                    if (respBean.status == 200) {
                        find.attr("placeholder",respBean.data.number)
                        span.html(respBean.data.money)
                    }
                }
            })
        })
        /*减少*/
        $("#tbody").on("click",".js",function () {
            let id = $(this).parents("tr").children("td").eq(0).html();
            let find = $(this).parents("tr").find("input:eq(1)");
            let span = $(this).parents("tr").find( "span[name='money']");
            $.ajax({
                url:"/taobei_web/cart/deleteProduct",
                data:{
                    CPId:id
                },
                type:"post",
                dataType:'json',
                success:function (respBean) {
                    if (respBean.status == 200) {
                        find.attr("placeholder",respBean.data.number)
                        span.html(respBean.data.money)
                    }
                }
            })
        })
        /*单个删除*/
        $("#tbody").on("click",".delete",function () {
            let id = $(this).parents("tr").children("td").eq(0).html();
            let tr = $(this).parents("tr");
            let b = confirm("确定删除吗？");
            if (b) {
                $.ajax({
                    url:"/taobei_web/cart/deleteProductById",
                    data:{
                        productId:id
                    },
                    type:"post",
                    dataType:"json",
                    success:function (respBean) {
                        if (respBean.status == 200) {
                            alert(respBean.msg)
                            tr.remove();
                        }
                    }
                })
            }
        })
        /*多选删除*/
        $("#deleteAll").click(function () {
            let b = confirm("确定删除吗？");
            if(b){
                let arr = [];
                $(".single").each(function () {
                    if (this.checked) {
                        let id = $(this).parents("tr").children("td").eq(0).html();
                        arr[arr.length] = id;
                    }
                })
                $.ajax({
                    url:"/taobei_web/cart/deleteProductAll",
                    data:{
                        list:arr
                    },
                    type: "post",
                    dataType:'json',
                    traditional:true,
                    success:function (respBean) {
                        if (respBean.status == 200) {
                            alert(respBean.msg);
                            $(".single").each(function () {
                                if (this.checked) {
                                    $(this).parents("tr").remove();
                                }
                            })
                        }
                    }
                })
            }
        })
        /*跳转到首页*/
        $("#span_shy").click(function () {
            location.href="userIndex4.html"
        })
        /*根据名字模糊搜索*/
        $("#button_id").click(function () {
            $.ajax({
                url:"/taobei_web/cart/getProductListByName",
                data:{
                    name:$("#username").val()
                },
                type:"get",
                dataType:"json",
                success:function (respBean) {
                    if (respBean.status == 200) {
                        let text;
                        for (let i = 0; i < respBean.data.length; i++) {
                            text +="<tr>\n" +
                                "                <td style=\"display: none\">"+respBean.data[i].id+"</td>\n" +
                                "                <td style=\"width: 300px\">\n" +
                                "                    <div style=\"float: left;margin-right: 10px;margin-top: 40px\">\n" +
                                "                        <input type=\"checkbox\" class=\"single\" >\n" +
                                "                    </div>\n" +
                                "                    <div style=\"width: 100px;height: 100px;overflow: hidden;float: left\">\n" +
                                "                        <img src=\""+respBean.data[i].url+"\" style=\"width: 100%\">\n" +
                                "                    </div>\n" +
                                "                    <div style=\"width: 150px;float: left;margin-top: 10px;margin-left: 5px\">\n" +
                                "                        <span>"+respBean.data[i].name+"</span><br>\n" +
                                "                        <div><p style=\"font-size: 10px;color: #88868d;margin: 0px\">"+respBean.data[i].context+"</p></div>\n" +
                                "                        <span style=\"font-size: 12px\"><a>店铺名称：<span>"+respBean.data[i].storeName+"</span></a></span>\n" +
                                "                    </div>\n" +
                                "                </td>\n" +
                                "                <td style=\"width: 150px;font-size: 12px;color: #88868d;\">\n" +
                                "                    <div style=\"margin-top: 15px;margin-left: 10px\">\n" +
                                "                        <div style=\"margin-bottom: 8px\">商品类型：<span>"+respBean.data[i].ptName+"</span></div>\n" +
                                "                        <div style=\"margin-bottom: 8px\">存货：<span>"+respBean.data[i].repertory+"</span></div>\n" +
                                "                        <span>发货时间: <span>付款一天之内</span></span><br>\n" +
                                "                    </div>\n" +
                                "                </td>\n" +
                                "                <td style=\"width: 120px\">\n" +
                                "                    <div style=\"text-align: center;font-size: 16px;margin-top: 14px\">\n" +
                                "                        <span>￥</span><span>"+respBean.data[i].discountPrice+"</span>\n" +
                                "                    </div>\n" +
                                "                </td>\n" +
                                "                <td style=\"width: 120px\">\n" +
                                "                    <div class=\"row\" style=\"width: 100px;margin-top: 14px\">\n" +
                                "                        <div class = \"col-lg-6\">\n" +
                                "                            <div  class = \"input-group\">\n" +
                                "                                <span class = \"input-group-btn\" >\n" +
                                "                                    <button  class = \"btn btn-default js\"  type = \"button\">-</button>\n" +
                                "                                </span>\n" +
                                "                                <input name=\"keleyicom\" type = \"text\"  class = \"form-control\"  placeholder = \""+respBean.data[i].number+"\" style=\"width: 40px\">\n" +
                                "                                <span  class = \"input-group-btn\" >\n" +
                                "                                    <button class = \"btn btn-default zj\" type = \"button\">+</button>\n" +
                                "                                </span>\n" +
                                "                            </div>\n" +
                                "                        </div>\n" +
                                "                    </div>\n" +
                                "                </td>\n" +
                                "                <td>\n" +
                                "                    <div style=\"color: red;font-weight: bold;text-align: center;margin-top: 10px\">\n" +
                                "                        <span>￥</span><span name=\"money\">"+respBean.data[i].money+"</span>\n" +
                                "                    </div>\n" +
                                "                </td>\n" +
                                "                <td style=\"text-align: center;font-size: 10px\">\n" +
                                "                    <div class=\"delete\"  style=\"margin-top: 15px\">\n" +
                                "                        <a>删除</a>\n" +
                                "                    </div>\n" +
                                "                    <div>\n" +
                                "                        <a>加入收藏夹</a>\n" +
                                "                    </div>\n" +
                                "                </td>\n" +
                                "            </tr>"
                        }
                        text +="<tr>\n" +
                            "      <td style=\"height: 60px\"></td>\n" +
                            "  </tr>"
                        $("#tbody").html(text);
                    }
                }
            })
        })
        $("#button_id1").click(function () {
            let arr = [];
            $(".single").each(function () {
                if (this.checked) {
                    let id = $(this).parents("tr").children("td").eq(0).html();
                    arr[arr.length] = id;
                }
            })
            if (arr.length == 0) {
                alert("请选择商品")
                return
            }
            $.ajax({
                url:"/taobei_web/cart/getProductID",
                data:{
                    list:arr
                },
                type: "get",
                dataType:'json',
                traditional:true,
                success:function (respBean) {
                    if (respBean.status == 200) {
                        $.ajax({
                            url: 'order/addOrderCartByUserId',
                            type:"GET",
                            dataType: 'json',
                            success(res) {
                                if (res.status == 200){
                                    console.log(res)
                                    //订单生成成功，跳转到订单详情页面
                                    location.href = "userOrderDetails.html?id="+res.data.id;

                                    // location.href = "userOrderDetails.html";
                                }
                            }
                        })
                    }else {
                        alert(respBean.msg);
                    }
                }
            })
        })
    })

    function f() {
        let arr = [];
        let nums = 0;
        $(".single").each(function () {
            if (this.checked) {
                let id = $(this).parents("tr").children("td").eq(0).html();
                arr[arr.length] = id;
                nums++;
            }
        })
        $.ajax({
            url:"/taobei_web/cart/getMoneyAll",
            data:{
                list:arr
            },
            type: "get",
            dataType:'json',
            traditional:true,
            success:function (respBean) {
                if(respBean.status == 200){
                    $("#moneyAll").html(respBean.data);
                    $("#nums").html(nums);
                }
            }
        })
    }
</script>
<body>
<nav class=" navbar-inverse  navbar-fixed-top">
    <div class="container-fluid" >
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class=""><a href="#" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                <li><a href="#" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"   style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">数码电子</a></li>
                        <li><a href="#">食品</a></li>
                        <li><a href="#">生活用品</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">服装 | 男装 | 女装</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">厨具用品</a></li>
                    </ul>
                </li>
            </ul>
            <!--  <form class="navbar-form navbar-left">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
              </form>-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"  id="a2">亲，请登录</a></li>
                <li><a href="#" style="padding-top: 7px;margin-top: 0px;">注册</a></li>
                <li><a href="#"  style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span id="nums1" style="color: #eb9e9b">0</span></a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="div1">
    <div id="div2">
        <a href="userIndex4.html"><img src="asscerts/img/taobeilogo.jpg" style="height: 250px;margin-top: -85px;margin-left: -30px"></a>
    </div>
<!--    <div id="div3">-->
<!--        <span class="span1">数码电子</span>-->
<!--        <span style="margin-left: 10px" class="span1">生活用品</span>-->
<!--        <span style="margin-left: 10px" class="span1">服装饰品</span>-->
<!--        <span style="margin-left: 10px" class="span1">厨具用品</span>-->
<!--    </div>-->
    <div class="form-group">
        <input type="text" class="form-control" style="width: 220px;float: left" placeholder="搜索，当前购物车" name="username" id="username">
        <input id="button_id" type="button" value="搜索">
    </div>
</div>
<div id="div4">
    <div id="div6"><span id="span_shy">首页</span> > <span>购物车</span></div>
    <div id="div5">
        <table class="table table-hover ">
            <tr>
                <th style="display: none">0</th>
                <th ><div class="checkbox" style="font-weight: bold">
                    <label style="font-weight: bold">
                        <input type="checkbox" id="all"> 全部
                    </label>
                </div></th>
                <th style="padding-top: 18px">商品</th>
                <th style="padding-top: 18px;text-align: center">单价</th>
                <th style="padding-top: 18px;text-align: center">数量</th>
                <th style="padding-top: 18px;text-align: center">金额</th>
                <th style="padding-top: 18px;text-align: center">操作</th>
            </tr>
            <tbody id="tbody">
            <!--<tr>
                <td style="width: 300px">
                    <div style="float: left;margin-right: 10px;margin-top: 40px">
                        <input type="checkbox" class="single">
                    </div>
                    <div style="width: 100px;height: 100px;overflow: hidden;float: left">
                        <img src="asscerts/img/979e177d45399d49.jpg" style="width: 100%">
                    </div>
                    <div style="width: 150px;float: left;margin-top: 10px;margin-left: 5px">
                        <span>华为P40Pro</span><br>
                        <div><p style="font-size: 10px;color: #88868d;margin: 0px">[可选12期白条免息] Apple 苹果 iPhone 13 5G手机 粉色 128G</p></div>
                        <span style="font-size: 12px"><a>店铺名称：<span>京东</span></a></span>
                    </div>
                </td>
                <td style="width: 150px;font-size: 12px;color: #88868d;">
                    <div style="margin-top: 15px;margin-left: 10px">
                        <div style="margin-bottom: 8px">商品类型：<span>电子产品</span></div>
                        <div style="margin-bottom: 8px">存货：<span>888</span></div>
                        <span>发货时间: <span>付款一天之内</span></span><br>
                    </div>
                </td>
                <td style="width: 120px">
                    <div style="text-align: center;font-size: 16px;margin-top: 14px">
                        <span>￥</span><span>1499</span>
                    </div>
                </td>
                <td style="width: 120px">
                    <div class="row" style="width: 100px;margin-top: 14px">
                        <div class = "col-lg-6">
                            <div  class = "input-group">
                                <span class = "input-group-btn" >
                                    <button  class = "btn btn-default"  type = "button">-</button>
                                </span>
                                <input type = "text"  class = "form-control"  placeholder = "2" style="width: 40px">
                                <span  class = "input-group-btn" >
                                    <button class = "btn btn-default" type = "button">+</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <div style="color: red;font-weight: bold;text-align: center;margin-top: 10px">
                        <span>￥</span><span>1499</span>
                    </div>
                </td>
                <td style="text-align: center;font-size: 10px">
                    <div style="margin-top: 15px">
                        <a>删除</a>
                    </div>
                    <div>
                        <a>加入收藏夹</a>
                    </div>
                </td>
            </tr>
            -->

            </tbody>
        </table>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" style="width: 910px;margin-left: 192px;background-color: #fefefe;height: 80px">
        <div class="container" style="width: 100%">
            <div class="checkbox" style="font-weight: bold;margin-top: 30px;float: left;margin-left: 20px">
                <label>
                    <input type="checkbox" id="qb"> 全部
                </label>
            </div>
            <div id="deleteAll" style="float: left;margin-top: 30px;margin-left: 30px">删除</div>
            <div style="float: left;margin-top: 30px;margin-left: 30px">加入收藏夹</div>
            <div style="float: left;margin-left: 270px;margin-top: 25px">已选商品 <span style="color: red;font-size: 20px" id="nums">0</span> 件</div>
            <div style="float: left;margin-left: 30px;margin-top: 25px">合计(不含运费)：<span style="color: red;font-size: 20px" id="moneyAll">0.00</span></div>
            <input type="button" id="button_id1" value="结算" >
        </div>
    </nav>
</div>
</body>
</html>